import styles from './styles.module.scss'
import Page from '@/components/Layout'
import { getFootballScoreList, getBasketballScoreList } from '@/server/live'
import FootballScoreList from '@/components/ScorePannier/football/scorelist'
import BasketBallScoreList from '@/components/ScorePannier/basketball/scorelist'
import { Breadcrumb } from 'antd';
import RenderJudge from '@/components/RenderJudge'
import Head from 'next/head'
import LiveMobile from '@/components/H5/Home/Live'
const Index = ({ res, type, mobile }) => {
  const types = {
    [process.env.NEXT_PUBLIC_Football]: "足球",
    [process.env.NEXT_PUBLIC_Basketball]: "篮球"
  }

  const text = {
    [process.env.NEXT_PUBLIC_Basketball]: {
      t: "篮球比分,即时比分,NBA比分直播-鑫球体育",
      d: `篮球比分,篮球即时比分,NBA直播,动画直播,文字直播,篮球直播,比分直播,篮球即时比分,篮球比分直播,鑫球体育`,
      k: "鑫球体育篮球比分提供最快的篮球比分直播与篮球文字动画直播，同时提供最准确的篮球分析、即时比分、篮球指数、篮球数据等，看篮球比分就上鑫球体育!"
    },
    [process.env.NEXT_PUBLIC_Football]: {
      t: "足球比分,即时比分,足球比分直播-鑫球体育",
      d: "足球比分,即时比分,足球直播,动画直播,文字直播,足球直播,比分直播,足球即时比分,足球比分直播,鑫球体育",
      k: "鑫球体育足球比分提供最快的足球比分直播与足球文字动画直播，同时提供最准确的足球分析、即时比分、足球指数、足球数据等，看足球比分就上鑫球体育!"
    }
  }
  return (
    <>
      <Head>
        <title>{Reflect.get(text, type)?.t}</title>
        <meta name='description' content={Reflect.get(text, type)?.d} />
        <meta name="keywords" content={Reflect.get(text, type)?.k} />
      </Head>
      <RenderJudge value={mobile} active={
        <LiveMobile ready match={{ type: type }} initFetch></LiveMobile>
      } inactive={
        <>
          <nav className={styles.nav}>
            <Breadcrumb separator=">">
              <Breadcrumb.Item href='/'>首页</Breadcrumb.Item>
              <Breadcrumb.Item href={`/score/${type}`}>{Reflect.get(types, type) + "比分"}</Breadcrumb.Item>
            </Breadcrumb>
          </nav>

          <section className={styles.score}>
            <RenderJudge value={type === '1'} active={
              <FootballScoreList data={res} />
            } inactive={
              <BasketBallScoreList data={res} />
            } />
          </section>
        </>
      } />

    </>
  )
}

Index.getLayout = (page, props) => {
  return (
    <Page header footer {...props}>
      {page}
    </Page >
  )
}


export async function getServerSideProps (ctx) {
  const type = ctx?.params?.id?.[0] || '1'//默认足球

  const api = {
    1: getFootballScoreList,
    2: getBasketballScoreList
  }
  const res = await Reflect.get(api, type)()

  return {
    props: {
      res,
      type
    }
  }
}

export default Index